@import 'reset.scss';
@import 'header.scss';
@import 'footer.scss';


$color:#a10000;
body{
    width: 1200px;
    margin: 0 auto;
}
/*商品名*/
section{
    #Route{
        border-bottom: 2px solid #e5e6e6;
        p{
            margin-bottom: 10px;

        }
        h3{
            display: inline-block;
        }
        div{
            float: right;
            a{
                margin: 10px;
            }
        }
    }

    /*商品展示区*/
    #Exhibition{
        border-bottom: 2px solid #e5e6e6;
        margin-top: 36px;
        position: relative;
        overflow: hidden;//高度塌陷

        /*放大镜,用js实现功能*/
        //已使用插件实现...
        // #BigBox{
        //     width: 400px;
        //     height: 400px;
        //     overflow: hidden;//overflow:hidden溢出400 X 400的框子后就隐藏掉了
        //     display: none;//可以使用当鼠标滑倒中图上时显示,大图框
        //     // background-color: blue;
        //     border: 1px solid black;
        //     position: absolute;
        //     top: 0;
        //     left: 580px;
        //     img{
        //         width: 100px;
        //         display: block;
        //         float: left;
        //         position: absolute;//定位后都会叠加在一起,则我们将其默认显示第0张,然后就可以选择哪一个就显示哪一个的大图片,且可以使用检测鼠标在中图400 X 400的相对坐标值来控制大图的唯一
        //         left: 0;
        //         top: 0;
        //     }
        // }

        /*商品展示区*/
        >div{//只这一级
            width: 1050px;
            // float: left;
            display: flex;
            justify-content: space-between;
            div{
                /*70 X 70 图*/
                &:nth-of-type(1){
                    ul{
                        width: 74px;
                        height: auto;
                        li{
                            width: 75px;
                            height: 75px;
                            border: 2px solid #b4b4b4;
                            margin-bottom: 20px;
                            cursor: pointer;
                            &:hover{
                                border: 2px solid $color;
                            }
                            img{
                                width: 100%;//直接让800 X 800的图自适应li的宽高
                            }
                        }
                    }
                }

                /*400 X 400 图*/
                &:nth-of-type(2){
                    width: 400px;
                    height: 400px;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }

                /*购物选择区*/
                &:nth-of-type(3){
                    width: 400px;
                    // height: 452px;
                    // background-color: blueviolet;
                    ul{
                        li{
                            color: #666666;
                            margin-bottom: 20px;
                            // background-color: rgba(44, 200, 228, 0.685);
                            font-size: 12px;
                            &:nth-of-type(1){
                                span{
                                    color: #a10000;
                                    &:nth-of-type(2){
                                        margin-left: 12px;
                                        strong{
                                            font-size: 18px;
                                        }
                                    }
                                    &:nth-of-type(3){
                                        margin-left: 20px;

                                    }
                                }
                            }
                            &:nth-of-type(2){
                                div{
                                    height: 100%;
                                    width: 130px;
                                    background-color: #b81c22;
                                    line-height: 30px;
                                    text-align: center;
                                    a{
                                        color: white;
                                    }
                                }
                            }
                            /*颜色*/
                            &:nth-of-type(3){
                                span{
                                    display: inline-block;
                                    width: 50px;
                                    height: 20px;
                                    line-height: 20px;
                                    text-align: center;
                                    border: 1px solid #c8c8c8;
                                    cursor: pointer;
                                    &:hover{
                                        border: 1px solid #a10000;
                                    }
                                    cursor: pointer;
                                }
                                // div{    
                                //     display: inline-block;
                                //     width: 97px;
                                //     height: 42px;
                                //     border: 2px solid #a10000;
                                //     margin: 0 10px;
                                // }
                            }
                            /* 尺码 */
                            &:nth-of-type(4){
                                span{
                                    display: inline-block;
                                    width: 50px;
                                    height: 20px;
                                    text-align: center;
                                    line-height: 20px;
                                    margin: 0 2px;
                                    border: 1px solid #c8c8c8;
                                    cursor: pointer;
                                    &:hover{
                                        border: 1px solid #a10000;
                                    }
                                }
                                
                            }
                            /*数量*/
                            &:nth-of-type(5){
                                height: 40px;
                                line-height: 40px;
                                select{
                                    width: 54px;
                                    height: 20px;
                                    border: 1px solid #c8c8c8;
                                }
                            }
                            /*已选*/
                            &:nth-of-type(6){
                                height: 40px;
                                line-height: 40px;
                                #HaveNo{
                                    color: #a10000;
                                    font-weight: 800;
                                }
                                span{
                                    margin-left: 10px;
                                }
                            }
                            /*购买*/
                            &:nth-of-type(7){
                                button{
                                    width: 168px;
                                    height: 34px;
                                    background-color: #b81c22;
                                    border: 1px solid#b71b21;
                                    margin-right: 10px;
                                    color: white;
                                }
                                img{
                                    width: 34px;
                                    height: 34px;
                                    vertical-align: bottom;
                                }
                            }
                            /*优惠提示*/
                            &:nth-of-type(8){
                                div{
                                    margin-bottom: 5px;
                                    height: 20px;
                                    // background-color: rgb(43, 226, 104);
                                    &:nth-of-type(1){
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        color: #b71b21;
                                        font-weight: bold;;
                                        span{
                                            display: inline-block;
                                            width: 166px;
                                            height: 1px;
                                            background-color: #b71b21;
                                        }
                                    }
                                    &:nth-of-type(2){
                                        span{
                                            display: inline-block;
                                            background-color: #b71b21 ;
                                            height: 18px;
                                            width: 34px;
                                            text-align: center;
                                            line-height: 18px;
                                            color: white;
                                        }
                                    }
                                    &:nth-of-type(3){
                                        span{
                                            display: inline-block;
                                            background-color: #b71b21;
                                            height: 18px;
                                            width: 60px;
                                            text-align: center;
                                            line-height: 18px;
                                            color: white;
                                        }
                                    }
                                    &:nth-of-type(4){
                                        span{
                                            height: 18px;
                                            width: auto;
                                            padding: 2px 10px;
                                            margin-right: 10px;
                                            background-color: #b71b21;
                                            color: white;
                                        }
                                    }
                                    &:nth-of-type(5){
                                        width: 100%;
                                        height: 1px;
                                        background-color: #b71b21;

                                    }
                                }
                            }
                        }
                    }

                }
            }
                
        }
    }
    /*购物车显示区*/
    #ShoppingCart{
        width: 100%;
        // height: 100px;
        background-color: blue;
        ul{
            display: flex;
            justify-content: space-between;
            li{
                display: block;
                width: 230px;
                margin: 2px;
                line-height: 40px;
                background-color: red;
                text-align: center;
            }
        }

    } 

    /*产品描述*/
    #describe{
        padding: 24px 0;
        border-bottom: 1px dotted #999999;
        a{
            color: #999999;
        }
        p{
            color: #666666;
            font-size: 12px;
            &:nth-of-type(1){
                padding-left: 5px;
                span{
                    display: inline-block;
                    width: 40px;
                }
            }
            &:nth-of-type(3){
                span{
                    display: inline-block;
                    width: 50px;
                }
            }
        }
    }

    /*产品属性*/
    #attribute{
        padding: 20px 0;
        font-size: 12px;
        p{
            margin: 5px 0;
            color: #9999b3;
            &:nth-of-type(2){
                display: flex;
                justify-content: space-around;
                >span{
                    color: #a10000;
                    span{
                        color: #333333;
                    }
                }
            }
        }
    }

    /*详情图片*/
    #picture{
        color: #999999;
        font-size: 12px;
    }

    /*模特 尺码 洗涤保养*/
    section{
        text-align: center;
        #model{
            padding: 30px 0;
            img{
                margin-top: 15px;
            }
        }
        #Size{
            img{
                margin-top: 15px;
            }
        }
    }

    /*评论 提问*/
    #Interaction{
        width: 1200px;
        padding: 10px 0;
        margin: 10px 0;
        // position: relative;
        overflow: hidden;
        #Recommend{
            width: 194px;
            // background-color: red;
            text-align: center;
            float:left;
            // position: absolute;
            // left: 0;
            // top: 0;
            li{
                border: 1px solid #bbbbbb;
                a{
                    color: #bbbbbb;
                    p:nth-of-type(2){
                        color: red;
                        font-weight: 800;
                    }
                }
                img{
                    width: 190px;
                    margin: 10px 0;
                }
            }
        }
        #QuestionsAndAnswers{
            float: right;
            width: 985px;
            #comment{
                width: 980px;
                height: 43px;
                // background-color: rgba(32, 212, 128, 0.788);
                line-height: 43px;
                border: 1px solid #bbbbbb;
                button{
                    width:120px;
                    height: 33px;
                    float: right;
                    margin: 5px 20px;
                    background-color: #d46a6a;
                    border: none;
                    color: white;
                }
            }
            #CommentArea{
                width: 969px;
                height: auto;
                padding: 15px 5px;
                border: 1px solid #bbbbbb;
                margin-bottom: 20px;
            }
        }
        
    }

}